<template>
  <div :class="{'mobile-detail-wrap':showMobilePage, 'permissionDenied-container': permissionDenied }">
    <template v-if="!permissionDenied">
      <div class="customer-container no-margin">
        <div class="top-box">
          <div class="flex top-center">
            <img :src="company" class="company-icon">
            <el-tooltip placement="top" popper-class="radio-tip">
              <div slot="content" style="max-width: 200px;">{{ detailData.clientName }}</div>
              <p class="company-text">{{ detailData.clientName }}</p>
            </el-tooltip>
            <a :href="'https://www.tianyancha.com/search?key=' + detailData.clientName" target="_blank"><p class="company-more">查看更多工商信息 ></p></a>
            <div style="flex:1;"/>
            <PlainCreateBtn v-if="hasRouteAuth('crm:customer:edit') && hasDialogModuleEditAuth && !detailLoading" icon-name="el-icon-edit-outline" size="small" @click="editClientInfo">编辑</PlainCreateBtn>
          </div>
          <div class="flex tag-box">
            <p v-if="typeof detailData.clientType === 'number'" class="company-tag company-type">{{ detailData.clientType | clientStatusFilter }}</p>
            <p v-if="detailData.clientStatusStr" :style="{color: detailData.statusColor, background: changeColorAlphaVal(detailData.statusColor, 0.14)}" class="company-tag company-status">{{ detailData.clientStatusStr || '--' }}</p>
            <p v-if="detailData.overdueStatus" class="company-tag company-due">有回款逾期</p>
          </div>
        </div>
        <div class="customer-info small-padding">
          <template v-if="hasRouteAuth('crm:customer:clientInfo:read')">
            <Title id="customerInfo" title="客户信息" class="invioce-title mt0"/>
            <detailInfo :detail-data="detailData" :id="customerId" @levelDialogShow="levelDialogShow" @handleAddRemark="handleAddRemark" @openRemarkLog="openRemarkLog" @updateLog="getLogList"/>
          </template>
          <template v-if="hasRouteAuth('crm:customer:levelInfo:read')">
            <Title id="levelInfo" title="等级账期" class="invioce-title" />
            <el-form :class="{'mobile-el-form': showMobilePage}" class="customer-form lineHeight32" label-position="right" label-width="100px">
              <el-row :gutter="showMobilePage?0:8" :type="showMobilePage?'':'flex'" class="content">
                <el-col :span="8">
                  <el-form-item label="客户等级:">
                    <span v-if="!detailData.levelColor">{{ detailData.clientGrade || '--' }}</span>
                    <div v-else :style="{color: detailData.levelColor, background: changeColorAlphaVal(detailData.levelColor, 0.14)}" class="text-bg">{{ detailData.clientGrade || '--' }}</div>
                    <el-button type="text" size="small" class="adjust-btn" @click="levelDialogShow(LEVEL_CHANGE_TYPE.LEVEL)">调整等级</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="欠款额度(元):">
                    <div class="flex-center">
                      <div v-if="detailData.oweData" class="flex-center">
                        <el-tooltip :open-delay="800" placement="top">
                          <div slot="content" style="max-width:200px;" >
                            {{ (detailData.oweData.availableAmount) | moneyFilter(true, '', true) }} / {{ (detailData.oweData.totalAmount) | moneyFilter(true, '', true) }}
                          </div>
                          <div><span style="color: red">{{ (detailData.oweData.availableAmount) | bigDataFilter(true, '', true, 2) }}</span>/<span>{{ (detailData.oweData.totalAmount) | bigDataFilter(true, '', true, 2) }}</span></div>
                        </el-tooltip>
                      </div>
                      <div v-else>--/--</div>
                      <el-button type="text" size="small" class="adjust-btn" @click="levelDialogShow(LEVEL_CHANGE_TYPE.AMOUNT)">调整额度</el-button>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="欠款账期:">
                    <span v-if="detailData.accountPeriod || detailData.accountPeriod === 0">{{ detailData.accountPeriod }}天</span>
                    <span v-else>--</span>
                    <el-button type="text" size="small" class="adjust-btn" @click="levelDialogShow(LEVEL_CHANGE_TYPE.PERIOD)">调整账期</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
          <template v-if="hasRouteAuth('crm:customer:invoiceInfo:read')">
            <Title id="invoiceInfo" title="开票信息" class="invioce-title" />
            <el-form :class="{'mobile-el-form': showMobilePage}" class="customer-form lineHeight32" label-position="right" label-width="100px">
              <el-row :gutter="showMobilePage?0:8" :type="showMobilePage?'':'flex'" class="content">
                <el-col :span="8">
                  <el-form-item :label="detailData.clientType?'身份证号':'纳税人识别号'" class="client-name">
                    <SecretText :log-text="getLogText(detailData.clientType?'身份证号':'纳税人识别号')" :origin-text="detailData.invoiceInfo.taxpayerNum" />
                  </el-form-item>
                  <el-form-item label="注册电话:" class="client-name">
                    <SecretText :log-text="getLogText('注册电话')" :origin-text="detailData.invoiceInfo.phone" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户行:" class="client-name">
                    <ToolTip :content="detailData.invoiceInfo.openBank" />
                  </el-form-item>
                  <el-form-item label="开票地址:" class="client-name">
                    <SecretText :log-text="getLogText('开票地址')" :origin-text="detailData.invoiceInfo.invoiceAddress" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户账号:" class="client-name">
                    <SecretText :log-text="getLogText('开户账号')" :origin-text="detailData.invoiceInfo.accountNum" />
                  </el-form-item>
                  <el-form-item label="一般纳税人证明:" class="client-name indentation-form-item">
                    <FileShowList :file-list="detailData.invoiceInfo.taxpayerAttachment || []" @download="downloadSuccess"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </div>
        <div class="table-list">
          <template v-if="hasRouteAuth('crm:customer:orderInfo:read')">
            <Title id="order" title="订单" class="invioce-title" />
            <dataDisplay
              v-loading="clientDashboardLoading"
              v-if="customerId && clientData"
              :data-list="dataList"
              class="data-display" />
            <detailOrder v-if="customerId" ref="detailOrder" :customer-name="detailData.clientName" :customer-id="customerId" @levelDialogShow="levelDialogShow" @openDialog="openDialog" @seachOrderData="seachOrderData" />
          </template>
          <template v-if="hasRouteAuth('crm:customer:contactsInfo:read')">
            <Title id="contact" title="联系人" class="invioce-title" />
            <ContactReadTable ref="contactTable" :customer-id="customerId" @updateLog="getLogList"/>
          </template>
          <template v-if="hasRouteAuth('crm:customer:payerInfo:read')">
            <Title id="payer" title="付款人" class="invioce-title" />
            <PayerReadTable ref="payerTable" :customer-id="customerId" @updateLog="getLogList"/>
          </template>
          <template v-if="hasRouteAuth('crm:customer:contractInfo:read')">
            <Title id="contract" title="关联合同" class="invioce-title" />
            <ContractTable ref="contractTable" :opp-company="detailData.clientName" :opp-company-id="customerId" />
          </template>
          <template v-if="hasRouteAuth('crm:customer:LogInfo:read')">
            <Title id="log" title="操作日志" class="invioce-title" />
            <CustomerLog :id="customerId" :logs-num="logsNum" :log-list-data="logListData" @editLogCallback="getLogList" />
          </template>
        </div>
        <createSettle ref="createRef" not-jump @getData="afterCreate" />
        <LevelInfo
          ref="levelInfoRef"
          :customer-id="customerId"
          :customer-name="detailData.clientName"
          @fetchData="setAccountPeriodCallBack" />
        <EditDialog ref="editInfoDialog" :form-data="detailData" @updateDetail="updateDetail(true)" @downloadSuccess="downloadSuccess" />
        <fixed-pagination>
          <div class="center">
            <el-button class="sync-btn mobile-btn-flex" type="primary" size="small" @click="goCreateSupplier">同步到供应商</el-button>
            <el-button v-if="hasRouteAuth('crm:customer:edit') && !detailLoading" type="primary" size="small" @click="toEdit">编辑</el-button>
            <el-button
              class="back-btn cancel-btn-style"
              type="info"
              size="small"
              @click="handleBack"
            >返回</el-button>
          </div>
        </fixed-pagination>
      </div>
      <addRemark ref="editRemarkRef" @updateDetail="updateDetail"/>
      <remarkListDialog ref="remarkListDialog"/>
      <!-- 导航 -->
      <div v-if="hasVisibleAuth" :style="{width: isNavOpen ? '140px' : '0px'}" class="nav-wrap">
        <div :style="{padding: isNavOpen ? '12px 0' : '0'}" class="nav-list">
          <template v-for="item in navList">
            <template v-if="item.show">
              <div v-show="isNavOpen" :key="item.id" :class="currentNav === item.id && 'active'" class="item" @click="changeNav(item, true)">
                <Ellipsis :content="item.name" placement="left" />
              </div>
            </template>
          </template>
          <div v-if="isNavOpen" class="close-btn btn" @click="switchShow">
            <img :src="closeIcon">
          </div>
          <div v-else class="open-btn btn" @click="switchShow">
            <img :src="openIcon">
          </div>
        </div>
      </div>
    </template>
    <div v-else>
      <DeniedPlaceholder />
    </div>
  </div>
</template>

<script>
import DetailTabs from '@/components/Common/baseComponent/DetailTabs';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import FileShowList from '@/components/CreateOrder/fileShowList';
import detailInfo from '@/components/Customer/detail/detailInfo';
import detailOrder from '@/components/Customer/detail/detailOrder';
import createSettle from '@/components/Customer/createSettle';
import LevelInfo from '@/components/Customer/setAccountPeriod';
import Title from '@/components/Title';
import CustomerLog from '../module/customerLog';
import ContactReadTable from './module/contactReadTable';
import PayerReadTable from './module/payerReadTable';
import ContractTable from './module/contractTable';
import addRemark from './module/addRemark';
import remarkListDialog from './module/remarkListDialog';
import EditDialog from './module/editDialog';
import { getClientInfo, getClientDetailDashboard, clientLogs, clientAttachmentDownload } from '@/api/customer';
import { LEVEL_CHANGE_TYPE } from '@/utils/const/customer';
import { changeColorAlphaVal } from '@/utils/tools';
import { hasRouteAuth } from '@/utils/permission';
import { moneyFilter, bigDataFilter } from '@/filters/number';
import { clientStatusFilter } from '@/filters/status';
import { mapState } from 'vuex';
import delayMoney from '@/assets/project/additionalTax.png';
import delayOrder from '@/assets/dataDisplay/icon_38.png';
import deptMoney from '@/assets/chargeOffDetail/maori.png';
import deptOrder from '@/assets/dataDisplay/rmb.png';
import orderAll from '@/assets/dataDisplay/icon_28.png';
import returnAll from '@/assets/project/totalCost.png';
import openIcon from '@/assets/medium/openIcon.png';
import closeIcon from '@/assets/medium/closeIcon.png';
import company from '@/assets/customer/company.png';

export default {
  filters: { moneyFilter, bigDataFilter, clientStatusFilter },
  components: {
    Title,
    detailInfo,
    detailOrder,
    dataDisplay,
    createSettle,
    LevelInfo,
    DetailTabs,
    ContactReadTable,
    CustomerLog,
    FileShowList,
    EditDialog,
    addRemark,
    remarkListDialog,
    PayerReadTable,
    ContractTable
  },
  data() {
    return {
      openIcon,
      closeIcon,
      company,
      permissionDenied: false, // 详情页是否可查看
      detailLoading: false,
      LEVEL_CHANGE_TYPE,
      customerId: '',
      clientDashboardLoading: true,
      detailData: {
        invoiceInfo: {}
      },
      clientData: {},
      contactParams: {
        page: 1,
        perPage: 10
      },
      payerParams: {
        page: 1,
        perPage: 10
      },
      payerLoading: false,
      emptyText: '暂未添加付款人，可通过编辑客户添加',
      payerData: [], // 付款人列表数据
      payerDataCount: 0,
      dataList: [],
      logsNum: 0,
      logListData: [],
      isClickScrolling: false,
      isNavOpen: false,
      currentNav: 'customerInfo'
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    navList() {
      return [
        { name: '客户信息', id: 'customerInfo', show: hasRouteAuth('crm:customer:clientInfo:read') },
        { name: '等级账期', id: 'levelInfo', show: hasRouteAuth('crm:customer:levelInfo:read') },
        { name: '开票信息', id: 'invoiceInfo', show: hasRouteAuth('crm:customer:invoiceInfo:read') },
        { name: '订单', id: 'order', show: hasRouteAuth('crm:customer:orderInfo:read') },
        { name: '联系人', id: 'contact', show: hasRouteAuth('crm:customer:contactsInfo:read') },
        { name: '付款人', id: 'payer', show: hasRouteAuth('crm:customer:payerInfo:read') },
        { name: '关联合同', id: 'contract', show: hasRouteAuth('crm:customer:contractInfo:read') },
        { name: '操作日志', id: 'log', show: hasRouteAuth('crm:customer:LogInfo:read') }
      ];
    },
    hasVisibleAuth() {
      return this.hasRouteAuth(['crm:customer:clientInfo:read', 'crm:customer:levelInfo:read', 'crm:customer:invoiceInfo:read',
        'crm:customer:orderInfo:read', 'crm:customer:contactsInfo:read', 'crm:customer:payerInfo:read',
        'crm:customer:contractInfo:read', 'crm:customer:LogInfo:read']);
    },
    hasDialogModuleEditAuth() {
      return this.hasRouteAuth(['crm:customer:clientInfo:read', 'crm:customer:levelInfo:read', 'crm:customer:invoiceInfo:read']);
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.name !== 'editCustomer') {
        vm.contactParams.page = 1;
        vm.payerParams.page = 1;
      }
    });
  },
  created() {
    this.customerId = Number(this.$route.params.customerId) || '';
    this.getData();
    this.clearTableFilter();
    this.getClientData();
    this.$nextTick(() => {
      this.$refs.contactTable && this.$refs.contactTable.getContactList();
    });
    this.getLogList();
  },
  mounted() {
    setTimeout(() => {
      window.addEventListener('scroll', this.handleCurrentNav);
    }, 1000);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleCurrentNav);
  },
  methods: {
    hasRouteAuth,
    changeColorAlphaVal,
    handleCurrentNav: _.debounce(function() {
      // 手动点击Nav不触发监听
      if (!this.isClickScrolling) {
        this.navList.forEach(it => {
          const ele = document.querySelector(`#${it.id}`);
          if (ele) {
            const eleTop = ele.getBoundingClientRect().top;
            it.top = eleTop;
          }
        });
        // 取top绝对值的最小值
        const currentNav = this.navList.find(i => Math.abs(i.top) === Math.min(...this.navList.filter(k => k.top).map(j => Math.abs(j.top))));
        this.changeNav(currentNav);
      }
    }, 500),
    scrollView(id) {

    },
    changeNav({ id }, isClick = false) {
      if (isClick) {
        if (id) {
          this.isClickScrolling = true;
          const dom = document.getElementById(id);
          dom && dom.scrollIntoView({ behavior: 'smooth' });
          setTimeout(() => {
            this.isClickScrolling = false;
          }, 1500);
        }
      }
      this.currentNav = id;
    },
    switchShow() {
      this.isNavOpen = !this.isNavOpen;
      this.flag = false;
      this.$nextTick(() => {
        this.flag = true;
      });
    },
    getData() {
      const params = {
        id: this.customerId
      };
      this.detailLoading = true;
      getClientInfo(params.id).then(res => {
        this.detailLoading = false;
        if (res.code === 200) {
          this.detailData = res.data;
        }
      }).catch(err => {
        this.detailLoading = false;
        if (err.code === 403) {
          this.permissionDenied = true;
        }
      });
    },
    getLogList() {
      clientLogs(this.customerId).then(res => {
        if (res.code === 200) {
          this.logsNum = res.data.items.length;
          this.logListData = res.data.items;
        }
      });
    },
    openDialog() {
      const data = {
        clientCompany: this.detailData.clientName
      };
      if (this.$refs.createRef) this.$refs.createRef.openDialog(data, false, true);
    },
    editClientInfo() {
      if (!hasRouteAuth('crm:customer:clientInfo:read')) {
        this.$message.warning('您没有客户信息权限，请联系管理员');
        return;
      }
      this.$refs.editInfoDialog && this.$refs.editInfoDialog.openDialog(this.detailData);
    },
    goCreateSupplier() { // 新建供应商
      if (!hasRouteAuth('medium:supplier:edit')) {
        this.$message.error('您暂无新增供应商权限，请联系管理员');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'supplierManage',
        query: {
          toCreate: 1,
          customerId: this.customerId
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    toEdit() {
      this.$router.push({
        name: 'editCustomer',
        params: { customerId: this.customerId, routeName: 'detailCustomer' }
      });
    },
    getClientData(filterPrams = {}) {
      const params = { ...filterPrams };
      params.clientId = Number(this.$route.params.customerId) || '';
      getClientDetailDashboard(params).then(res => {
        if (res.code === 200) {
          this.clientData = res.data;
          this.setDataList();
        }
        this.clientDashboardLoading = false;
      }).catch(() => {
        this.clientDashboardLoading = false;
      });
    },
    setDataList() {
      const clientData = this.clientData;
      this.dataList = [
        { label: '订单总额：', data: clientData['orderTotalPrice'] / 100, tooltip: '该客户的所有订单总额', icon: orderAll },
        { label: '核销总额：', data: clientData['returnMoneyTotal'] / 100, tooltip: '所有订单已完成流水', icon: returnAll },
        { label: '欠款订单数：', data: clientData['oweOrderNum'], tooltip: '未完全核销的订单数量', icon: deptOrder, isMoney: false },
        { label: '欠款金额：', data: clientData['owePrice'] / 100, tooltip: '订单待核销总额', icon: deptMoney },
        { label: '逾期订单数：', data: clientData['overdueOrderNum'], tooltip: '该客户订单已超过账期的包含未核销和部分核销订单数', icon: delayOrder, isMoney: false },
        { label: '逾期金额：', data: clientData['overduePrice'] / 100, tooltip: '该客户订单已超过账期的总待核销金额', icon: delayMoney },
        { label: '可核销流水：', data: clientData['writeOffFlow'] / 100, tooltip: '该客户名称的可核销流水总额', icon: orderAll }
      ];
    },
    setAccountPeriodCallBack() {
      this.getData();
      if (this.$refs.detailOrder) this.$refs.detailOrder.getData();
    },
    levelDialogShow(type) {
      this.$refs['levelInfoRef'].openDialog(type);
      if (type === LEVEL_CHANGE_TYPE.LEVEL) {
        this.$refs['levelInfoRef'].paramsObj.name = this.detailData.clientGrade;
      }
    },
    handleBack() {
      this.$router.push({
        name: 'customer'
      });
    },
    // 订单列表重新搜索后触发的方法
    // 这里用于，获取搜索条件，请求订单数据
    seachOrderData(filterPrams) {
      this.getClientData(filterPrams);
    },
    // 创建结算单后跳转
    afterCreate(id) { // 查看单据
      this.$router.push({
        name: 'settleCustomer',
        params: { id }
      });
    },
    formatTag(val) {
      if (val && val instanceof Array) {
        return val.map(item => {
          return item.name;
        }).join(',');
      } else {
        return '--';
      }
    },
    clearTableFilter() {
      this.$refs['detailOrder'] && this.$refs['detailOrder'].resetFilterData();
    },
    getLogText(label) {
      return `销售客户 ${this.detailData.clientName} 的 ${label}`;
    },
    handleAddRemark() {
      this.$refs.editRemarkRef.handleOpen(this.customerId);
    },
    updateDetail(isFreshOrderInfo = false) {
      this.getData();
      if (isFreshOrderInfo) {
        this.getClientData();
      }
      this.getLogList();
    },
    openRemarkLog() {
      this.$refs.remarkListDialog.handleOpen(this.customerId);
    },
    downloadSuccess(val) {
      const data = {
        id: this.customerId,
        name: val.name
      };
      clientAttachmentDownload(data).then(res => {
        if (res.code === 200) {
          this.getLogList();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.top-box {
  padding: 16px 24px;
  background: url(../../../assets/customer/detail_bg.png) no-repeat;
  background-size: 100% auto;
  border-bottom: 1px solid #ebeefd;
  p {
    margin: 0;
    padding: 0;
  }
  .top-center {
    align-items: center;
  }
  .company-icon {
    width: 24px;
    margin-right: 4px;
  }
  .company-text {
    max-width: 300px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
  .company-more {
    margin-left: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #406eff;
  }
  .tag-box {
    margin: 12px 0 0 28px;
  }
  .company-tag {
    margin-right: 8px;
    padding: 1.5px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
  }
  .company-type {
    color: #406eff;
    background-color: #EFF4FF;
  }
  .company-status {
    color: #31cc9c;
    background-color: #E2F8F2;
  }
  .company-due {
    color: #fd8546;
    background-color: #FFF2EB;
  }
}
.customer-info {
  margin-bottom: 0;
  background-color: #fff;
  padding: 17px 24px 0 24px;
}
.invioce-title{
  margin: 23px 0 12px;
}
.mt0 {
  margin-top: 0;
}
.data-display {
  margin: 8px 0 16px;
  &::v-deep {
    .data-item {
      &:nth-of-type(4n) {
        border-right: 1px solid #DDE1EA;
      }
      &:nth-of-type(5n) {
        border-right: none;
      }
    }
  }
}
.customer-form {
  padding-left: 12px;
  &::v-deep {
    .el-form-item {
      // height: 30px;
      overflow: hidden;
      margin-bottom: 0px;
      .el-form-item__label {
        color: #999;
      }
    }
    .indentation-form-item {
      label {
        line-height: 1.2 !important;
        padding-left: 16px !important;
      }
    }
  }
  .content{
    .el-col{
      border-right: 1px solid #EBEEFD;
      &:last-of-type{
        border-right: none;
      }
    }
  }
}

.customer-container {
  background: #fff;
  margin: 16px;
  .table-list {
    background-color: #fff;
    padding: 0px 24px 55px 24px;
    min-height: calc(100vh - 380px);
  }
  .sync-btn {
    background-color: #fff;
    color: #406EFF;
    padding: 0 12px;
  }
}
.overdue-tag {
  margin-left: 8px;
  color: #FF504F;
  background-color: #fff;
  border: 1px solid #FF504F;
  width: 120px;
  height: 26px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  i {
    margin-right: 5px;
    font-size: 16px;
  }
}
.text-bg {
  padding: 0 10px;
  border-radius: 999px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
}
.adjust-btn {
  font-size: 14px;
  font-weight: bold;
  margin-left: 6px;
}
.nav-wrap {
  width: 140px;
  transition: width .25s ease;
  flex-shrink: 0;
  .btn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #406EFF;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    img {
      width: 6px;
      height: 5px;
    }
  }
  .open-btn {
    top: 24px;
    left: -10px;
    width: 10px;
    height: 40px;
    color: #fff;
  }
  .close-btn {
    top: 24px;
    left: -10px;
    width: 10px;
    height: 40px;
  }
  .nav-list {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 21;
    background-color: #fff;
    border-radius: 8px 0px 0px 8px;
    box-shadow: 0px 0px 6px 0px #dddddd;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 116px;
      height: 28px;
      padding: 0 12px;
      margin: 0 12px;
      font-family: PingFangSC-Regular;
      color: #666666;
    }
    .item:hover, .item.active {
      background: #EDEEF2;
      border-radius: 2px;
      cursor: pointer;
    }
    .item.active {
      font-weight: bold;
      color: #406EFF;
    }
  }
}
.permissionDenied-container {
  &::v-deep {
    .empty-placeholder-container {
      background-color: transparent;
    }
  }
}
</style>
